<template>
    <div>
        <h2 class="message_head">
            <!--<img src="@/images/messageLeft.png" alt="" v-on:click="$router.back(-1)">-->
            <ul>
                <li @click="currentActive = tab.belong" v-for="tab in message_head"
                    :class="{active: tab.belong == currentActive}">
                    {{ tab.text }}
                </li>
            </ul>
        </h2>

        <div class="mutlist" style="overflow-y: scroll;" :style="{ height: screen }">
            <mt-loadmore :top-method="loadTop" :bottom-all-loaded="allLoaded"
                         :auto-fill="false" ref="loadmore">
                <div :style="{ height: screen }" class="message_body">
                    <ul>
                        <li @click="messageClick(n)" v-for="n in notices" :key="n.id">
                            <span class="fr">{{ n.created_at }}</span>
                            <h4 :class="{after: !n.read_at && currentActive == 1}">通知</h4>
                            <p :class="{active: !n.expand}">{{ n.content }}</p>
                        </li>
                    </ul>
                </div>
            </mt-loadmore>
        </div>
    </div>

</template>
<script>
    import api from '@/utils/api';

    export default {
        name: 'MyTasks',
        data() {
            return {
                tasks: [],
                screen: false,
                allLoaded: false,
                currentActive: 1,
                message_head: [{
                    belong: 1,
                    text: '个人消息'
                }, {
                    belong: 2,
                    text: '系统消息'
                }],
                notices: [],
            }
        },
        methods: {
            loadTop() {
                this.setData()
            },
            async messageClick(n) {
                if (!n.read_at && this.currentActive == 1) {
                    let resp = await api.request('/user-notice/read', 'post', {id: n.id})
                    n.read_at = true
                }
                this.$set(n, 'expand', !n.expand);
            },
            async setData() {
                let resp = await api.request('/user-notice/index', 'post', {belong: this.currentActive})
                this.notices = resp.data.data
                this.$refs.loadmore.onTopLoaded();
            }
        },
        mounted() {
            let topHeight = document.getElementsByClassName('message_head')[0].offsetHeight
            this.screen = window.screen.height - topHeight + 'px';
            this.loadTop()
        },
        watch: {
            currentActive(newValue) {
                this.notices = []
                this.setData()
            }
        }

    }

</script>

<style scoped>

</style>
